<template>
  <section class="goods-brand">
    <div id="head" class="f-sb-fe">
      <div class="f-fs-fe">
        <h2>
          <el-tooltip :content="`点击进入${brand.text}专区`" placement="top">
            <router-link to="/" :style="{ color: 'red' }">{{
              brand.name
            }}</router-link>
          </el-tooltip>
        </h2>
        <ul class="f-fs-c">
          <li
            class="f-c-c"
            v-for="(ser, ind) in brand.series"
            :key="ind"
            :class="ind == seriesId ? 'active' : ''"
            @click="getGoodsBySeries(ser.id)"
          >
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              :content="ser.produce"
            >
              <span slot="reference">{{ ser.name + "系列" }}</span>
            </el-popover>
          </li>
        </ul>
      </div>
      <el-select
        v-model="orderType"
        size="mini"
        placeholder="请选择"
        style="width: 110px"
        @change="changeOrderType"
      >
        <el-option
          v-for="item in orderTypes"
          :key="item.id"
          :label="item.type"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div id="cont" class="f-fs-fs-r-w-sa">
      <block-sell
        v-for="(row, ind) in rows"
        :key="ind"
        :data="row"
      ></block-sell>
    </div>
    <div id="page" class="f-c-c">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currChange"
        :current-page="currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>
  </section>
</template>
<script>
import BlockSell from "../side/BlockSell.vue";
import { getGoodsByBrandSeries } from "../../assets/api/goods.js";
export default {
  name: "goodsBrand",
  props: ["brand"],
  components: {
    BlockSell,
  },
  data() {
    return {
      total: 0,
      currPage: 0,
      pageSize: 10,
      seriesId: 0,
      orderType: 1,
      rows: [],
    };
  },
  computed: {
    orderTypes() {
      return this.$store.state.opts.orderType;
    },
  },
  methods: {
    async init() {
      let end = await getGoodsByBrandSeries({ brandId: this.brand.id });
      console.log(end);
      let { rows, total, currPage, pageSize } = end;
      this.rows = rows;
      this.total = total;
      this.currPage = currPage;
      this.pageSize = pageSize;
    },
    changeOrderType(val) {
      this.orderType = val;
      this.getGoods();
    },
    sizeChange(val) {
      this.pageSize=val;
      this.getGoods();
    },
    currChange(val) {
      this.currPage=val;
      this.getGoods()
    },
    getGoodsBySeries(serId) {
      this.seriesId = serId;
      this.getGoods();
    },
    async getGoods() {
      let { brand, seriesId, orderType, currPage, pageSize } = this;
      let { rows } = await getGoodsByBrandSeries({
        brandId: brand.id,
        seriesId,
        orderBy: orderType,
        currPage,
        pageSize,
      });
      this.rows = rows;
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.goods-brand {
  border-radius: $border-radius-base;
  margin-bottom: 50px;
  padding: 15px 5px;
  background: $theme-color;
}
#head {
  .active {
    color: $color-text-regular;
    background: #ffffff;
  }
  h2 {
    text-align: center;
    width: 150px;
    height: 60px;
    line-height: 60px;
    margin-right: 10px;
    border-radius: $border-radius-base $border-radius-base 0 0;
    background: #ffffff;
    i {
      font-size: 30px;
    }
  }
  ul {
    color: #ffffff;
    li {
      cursor: pointer;
      padding: 0 20px;
      height: 36px;
      line-height: 18px;
      text-align: center;
      font: {
        size: 14px;
        weight: bold;
      }
      padding: 5px 10px;
      border-radius: 10px 10px 0 0;
      &:hover {
        color: $color-text-regular;
        background: #ffffff;
      }
    }
    li:not(:last-child) {
      margin-right: 5px;
    }
  }
  .el-select {
    margin-bottom: 5px;
  }
}
#cont {
  padding: 10px 0;
  border-radius: 0 $border-radius-base $border-radius-base $border-radius-base;
  background: #fff;
  .block-sell {
    margin: 10px 6px;
  }
}
#page {
  height: 50px;
  border-radius: $border-radius-base;
  margin-top: 5px;
  background: #fff;
}
</style>